<script setup>
import {computed, onMounted, ref, watch} from "vue";
const user=ref({name:"user",age:10});
const count=ref(0)
const status=ref('0')
const list=ref([1,2,3,4,5,6])
//过滤大于2的数组
const newList=computed(()=>{
  return list.value.filter(item=> item>2)
})
//排序
const sortList=computed(()=>{
  return list.value.sort((a,b)=> b-a)
})
//定时添加
setTimeout(()=>{
  list.value.push(9,10)
},3000)

const updateList=()=>{

    //定时添加
    setTimeout(()=>{
      count.value++
    },3000)

}

//定时删除 4后面的两个元素
setTimeout(()=>{list.value.splice(4,2)},10000)

//监听数据变化,immediate:true立即执行
watch(newList,(newv,oldv)=>{
  console.log(newv,oldv)
  status.value="数据"+oldv+"变化为"+newv;
},{immediate:true})

//监听数据变化,精确监听
watch(()=>user.value.age,(newv,oldv)=>{
  console.log(user,newv,oldv)
  status.value="user数据"+oldv+"变化为"+newv;
},{immediate:true})

//监听数据变化,精确监听
watch(user,(newv,oldv)=>{
  console.log(user.value.age,newv.name,oldv.name,newv.age,oldv.age)
 // status.value="user数据"+oldv+"变化为"+newv;
},{deep:true})

const change = () => {
  console.log("change")
  user.value.age++
}
onMounted(updateList)
</script>

<template>
  <view class="container">
    demo1
    <p/>{{status}}
    <p/>{{count}}
  </view>
  <view>
    <p/>{{list}}
    <p/>{{newList}}
    <p/>{{sortList}}
  </view>
  <button @click="change">{{user.age}}</button>
  <p>{{user.age}}</p>
</template>

<style >
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0f0;
}
</style>